<template>
  <div class="index">
    <div class="body">   
      <router-view />
    </div>
    <div class="tabbar">
      <div class="tabbar-item" :class="{'tabbar-color':index === selected - 1}"  v-for="(item,index) in tabbarNav" :key="index" @click="goPage(index+1)">
        <img  :src="index === selected - 1 ? item.activeImgUrl:item.imgUrl">
        <p>{{item.tabbarName}}</p>
      </div>
    </div>
    
  </div>
</template>

<script>
// import shouYe from './index/ShouYe'
// import pinTuan from './index/PinTuan'
// import gouWuChe from './index/GouWuChe'
// import woDe from './index/WoDe'
export default {
  data () {
    return {
      selected: '1',
      tabbarNav: [
        { id: '1', tabbarName: '首页', imgUrl: '//p12.jmstatic.com/mcms/89ea87200c623f4c7809f21f2ab4bce8.png', activeImgUrl: '//p12.jmstatic.com/mcms/5e9e00537e4a635e36e84db81f2cc17a.png' },
        { id: '2', tabbarName: '拼团', imgUrl: '//p12.jmstatic.com/mcms/b51a66ca3ddb31ec0edbd67ea68f7589.png', activeImgUrl: '//p12.jmstatic.com/mcms/562fb7b2ae7bf1cacdc8ed91493e53af.png' },
        { id: '3', tabbarName: '购物车', imgUrl: '//p12.jmstatic.com/mcms/77b9454e8dd41a060510a445010ac934.png', activeImgUrl: '//p12.jmstatic.com/mcms/35143fe7ab8afbaa41da2ea6e766d62b.png' },
        { id: '4', tabbarName: '我的', imgUrl: '//p12.jmstatic.com/mcms/829aa091062366a9f7b93cfffaa0e681.png', activeImgUrl: '//p12.jmstatic.com/mcms/482fb198341f583f92f1151eff6b99f0.png' }
      ],
      pageList : {
        1:'shouye',
        2:'pintuan',
        3:'gouwuche',
        4:'wode'
      }
    }
  },
  components:{
    // shouYe,
    // pinTuan,
    // gouWuChe,
    // woDe
  },
  methods: {
    goPage (index) {
      if(this.selected != index){
        this.selected = index
        console.log(index)
        this.$router.push(this.pageList[index])
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.index
  width 100%
  height 100%
  position relative
  .tabbar
    border-top 1px solid rgb(238, 238, 238)
    position fixed
    width 100%
    height 3rem
    display flex
    justify-content center
    text-align center
    align-items center
    bottom 0
    z-index 17
    .tabbar-item
      padding-top 0.2rem
      // width 5.3rem
      width 22.2%
      font-size 10px
      color #999
      img 
        width 1.4rem
    .tabbar-color
      color rgb(254, 64, 112)
      // background-color #DEF8FE
  // .mint-tabbar
  //   background-color #fff
  //   background-color rgb(255, 255, 255)
  //   border-top 1px solid rgb(238, 238, 238)
  //   z-index 17
  //   padding 0 20px
  //   .mint-tab-item
  //     &:active
  //       background-color #DEF8FE
  //   .is-selected
  //     background-color #fff
  //     color rgb(254, 64, 112)
</style>